<template>
  <div class="completion-rate-root">
    <div style="padding: 12px 12px;display: flex;flex-direction: column;">
      <ul>
        <li style="display: flex; border: 3px solid #FF4500; padding: 6px 32px; border-radius: 5px;">
          <img src="../../../assets/golbal_info/s1.png" alt="" />
          <div style="width: 6px;"></div>
          <div style="display: flex;flex-direction: column;">
            <div style="flex: 1;font-size: 24px;">生产目标</div>
            <div style="flex: 1;font-size: 18px;text-align: left;">{{ totalDispatchNum }}</div>
          </div>
        </li>
        <li style="display: flex;  border: 3px solid #FF4500; padding: 6px 32px; margin-top: 12px; border-radius: 5px;">
          <img src="../../../assets/golbal_info/s2.png" alt="" />
          <div style="width: 6px;"></div>
          <div style="display: flex;flex-direction: column;">
            <div style="flex: 1;font-size: 24px;">生产完成</div>
            <div style="flex: 1;font-size: 18px;text-align: left;">{{ totalReportNum }}</div>
          </div>
        </li>
      </ul>
      <div style="flex:1;" ref="completionDataRef">1</div>
    </div>
    <div style="width: 6px;"></div>
    <div style="flex: 1;height: 100%;display: flex;flex-direction: column;">
      <div ref="chart0" style="flex: 1;"></div>
      <div style="height: 12px;"></div>
      <div ref="chart1" style="flex: 1;"></div>
      <div style="height: 12px;"></div>
      <div ref="chart2" style="flex: 1;"></div>

    </div>
  </div>
</template>

<script>
import {getDispatchInfoApi,getProductMonthWcApi} from '../../../api/product/index.js'
export default {
  data() {
    return {
      valList: [],
      weekList: [],
      totalReportNum:'',
      totalDispatchNum:'1',
      // dispatchQty
      totalQui: '1'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const _that = this
      getDispatchInfoApi({pkCorp: 1002}).then(res => {
        const {code,data} = res
        if(code === 2000) {
          _that.valList = data
          _that.totalReportNum = data.reduce((preVal,item) => {
            return preVal + Number(item.reportQty)
          },0)
          _that.totalReportNum = `${_that.totalReportNum}`.split('.')?.[0] || _that.totalReportNum

          _that.totalDispatchNum = data.reduce((preVal,item) => {
            return preVal + Number(item.dispatchQty)
          },0)
           _that.totalDispatchNum = `${_that.totalDispatchNum}`.split('.')?.[0] || _that.totalDispatchNum
          _that.setCompletionDataOption()
        }
      })

      getProductMonthWcApi({pkCorp: 1002}).then(res => {
        const {code,data} = res
        if(code === 2000) {
          data.forEach((item,index) => {
            _that.setReportMonthOption(index,item.list,item.wc_name)
          })
        }
      })
    },
    setCompletionDataOption() {
      const _that = this
      const myChart = _that.$echarts.init(this.$refs.completionDataRef)
      const wcList = [],dispatchQtyList = [],reportQtyList = []
      _that.valList.forEach(valItem => {
        wcList.push(valItem.wcName)
        dispatchQtyList.push(valItem.dispatchQty)
        reportQtyList.push(valItem.reportQty)
      });
      const option = {
        legend: {
          show: true,
          right:0,
          orient: 'vertical',
          textStyle: {
            color: '#FFF'

          }
        },
        grid: {
          left: '0px',
          top: 0,
          right: '5px',
          bottom: '10px',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: false,
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        yAxis: {
          type: 'category',
          data: wcList,
          splitLine: {
            show: false
          },
          axisLine: { show: false },
          axisTick: { show: false },

            width: '24px',
          axisLabel: {
            color: '#FFF',
            fontSize: '9px',
          }
        },
        series: [
          {
            name: '派工数',
            type: 'bar',
            data: dispatchQtyList,
            label: {
              show: true,
              // position: 'right'
            }
          },
          {
            name: '完工数',
            type: 'bar',
            data: reportQtyList,
            label: {
              show: true,
              // position: 'right'
              color: '#FFF'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    setReportMonthOption(index,data,title) {
      const myChart = this.$echarts.init(this.$refs['chart'+index]),monthList = [],valueList = []
      data.forEach(item => {
        monthList.push(item.yearMonth)
        valueList.push(item.qualifiedQty)
      })
      const option = {
        title: {
          text: title + '产量',
          left:'15%',
          textStyle: {
            color: '#FFF'
          }
        },
        grid: {
          top: 20,
          left: '3%',
          right: '3%',
          bottom: '5px',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: monthList,
          axisLabel: {
            color: '#aaa',
            fontSize: 10,
            interval: 0,
          },

          axisLine: {
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} ',
            color: '#aaa',
            fontSize: 10,
          },
          // 图表区域横向的线
          splitLine: {
            show: false,
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        series: [
          {
            data: valueList,
            type: 'bar',
            label: {
              show: true,
              color: '#fff',
              fontSize: 12,
              position: 'top',
            },
            itemStyle: {
              color: '#FF4A01'
            },
          },
        ],
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
  .completion-rate-root {
    width: 100%;
    height: 100%;
    padding: 12px;
    display: flex;
    flex-direction: row;
    // .row-item {
    //   flex: 1;display: flex;flex-direction: row;align-items: center;justify-content: center;
    //   .col-item {
    //     flex: 1;position: relative;display: flex;align-items: center;justify-content: center;
    //   }
    // }
  }

 .analyse ul li {
  width: 100%;
  height: 100px;
  margin: 3% 0;
}
 .analyse ul li img {
  height: 100%;
  vertical-align: 0%;
}
</style>
